<?xml version="1.0" encoding="UTF-8"?>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:pt="http://xmlns.jcp.org/jsf/passthrough">
    <head>
        <title>Blue Pumpkin Admin Page</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
        <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css"/>        
        <link href="css/sb-admin-2.css" rel="stylesheet" type="text/css"/>
        <link href="css/toastr.min.css" rel="stylesheet" type="text/css"/>
        <!-- Custom Fonts -->
        <link href="font-awesome-4.1.0/css/font-awesome.min.css" rel="stylesheet" type="text/css"/>
    </head>
    <body>        
        <div class="container">
            <div class="row">
                <div class="col-md-4 col-md-offset-4">
                    <div class="login-panel panel panel-default">
                        <div class="panel-heading">
                            <h3 class="panel-title"><i class="glyphicon glyphicon-home"></i> LOGIN TO ADMINBOARD</h3>
                        </div>
                        <div class="panel-body">
                            <h:form id="loginform" onsubmit="return validate();">
                                <fieldset>
                                    <div class="form-group">                                        
                                        <div class="input-group">
                                            <span class="input-group-addon">
                                                <i class="fa fa-user"></i>
                                            </span>
                                            <h:inputText class="form-control" maxlength="50" pt:placeholder="Username"
                                                         id="email"
                                                         value="#{login.username}"/>

                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="input-group">
                                            <span class="input-group-addon">
                                                <i class="fa fa-key"></i>
                                            </span>
                                            <h:inputSecret class="form-control" maxlength="50" pt:placeholder="Password" 
                                                           id="password"
                                                           value="#{login.password}"/>

                                        </div>
                                    </div>                                    
                                    <h:commandButton class="btn btn-lg btn-primary btn-block" id="btn-alert-test"
                                                     value="Login" action="#{login.action()}"/>                                       
                                </fieldset>
                            </h:form>
                            
                            <h:panelGrid rendered="#{login.message}">
                                <div class="alert alert-warning fade in" role="alert">                                
                                    <button type="button" class="close" data-dismiss="alert"><span aria-hidden="true"><i class="glyphicon glyphicon-remove"></i></span><span class="sr-only">Close</span></button>
                                    <h4>Opp! You got a trouble.</h4>
                                    <p>Email or Password is not valid. Please try again.</p>                                    
                                    <p>
                                        <button type="button" class="btn btn-outline btn-default" >Or forgot your password ?</button>                                        
                                    </p>
                                </div>
                            </h:panelGrid>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <script src="js/jquery-1.11.0.js" type="text/javascript"></script>
        <script src="js/bootstrap.min.js" type="text/javascript"></script>
        <script src="js/toastr.min.js" type="text/javascript"></script>
        <script type="text/javascript">

                                toastr.options = {
                                    "closeButton": false,
                                    "debug": false,
                                    "positionClass": "toast-top-right",
                                    "onclick": null,
                                    "showDuration": "300",
                                    "hideDuration": "1000",
                                    "timeOut": "5000",
                                    "extendedTimeOut": "1000",
                                    "showEasing": "swing",
                                    "hideEasing": "linear",
                                    "showMethod": "fadeIn",
                                    "hideMethod": "fadeOut"
                                };

                                function validate() {
                                    var email = document.loginform["loginform:email"].value;
                                    var password = document.loginform["loginform:password"].value;
                                    if (email === "") {
                                        toastr.error('Please enter your username.');
                                        return false;
                                    }

                                    if (password === "") {
                                        toastr.error('Please enter your password.');
                                        return false;
                                    }
                                    return true;
                                }
                                ;

        </script>
    </body>
</html>
